<template>
	<view class="content-box">
		<view class="content">
			<view>
				<view class="status">{{ orderInfo.statusText }}</view>
				<view class="tips" v-if="orderInfo.status == 2">{{ $t('order.closed-tips') }}
					<u-count-down class="time" :time="countDownTime" format="HH:mm:ss"></u-count-down>
				</view>
			</view>
			<!-- 申诉状态 -->
			<view class="moudle" v-if="orderInfo.complaintStatus == 2 || orderInfo.complaintStatus == 3">
				<view class="apply-box">
					<view class="audit-results">{{ $t('order.Audit-Results') }}</view>
					<view class="apply-status">{{ orderInfo.complaintStatus == 2 ? $t('order.PASS') : $t('order.NO-PASS') }}
					</view>
				</view>
				<view class="apply-reason">
					{{ orderInfo.complaintResult }}
				</view>
			</view>
			<view class="moudle">
				<view class="info-one">
					<view class="price">{{ tradeType == 0 ? getReceiveCurrency(orderInfo.targetCurrencyId)
            : getReceiveCurrency(orderInfo.targetCurrencyId)
          }}{{ tradeType == 0 ? parseFloat(orderInfo.targetAmount) : parseFloat(orderInfo.targetAmount) }}</view>
					<view class="name">{{ $t('order.Name') }}:{{ tradeType == 1 ? orderInfo.userName : orderInfo.userName }}
					</view>
				</view>
				<view class="info-gray">
					<text class="gray">{{ tradeType == 0 ? orderInfo.createTime : orderInfo.createTime }}</text>
					<text class="gray">{{ $t('order.Receipt') }}:{{ tradeType == 0 ? $t('order.' + orderInfo.recipientCountry) :
            $t('order.' + orderInfo.recipientCountry) }}</text>
				</view>
			</view>
			<!-- 二维码 -->
			<view class="moudle" v-if="tradeType == 1 &&
        (orderInfo.status == 2 ||
          orderInfo.status == 30 ||
          orderInfo.status == 10)
        ">
				<view class="moudle-title">{{ $t('order.Receipt-Account') }}</view>
				<view class="code-box">
					<view @longpress="longTap">
						<UQrcode :modules="modules"></UQrcode>
					</view>
					<view class="tips">{{ $t('order.detail-tips') }}</view>
				</view>
				<!-- <canvas
          id="qrcode"
          canvas-id="qrcode"
          style="width: 200px; height: 200px"
        ></canvas> -->
			</view>
			<view class="moudle" v-if="tradeType == 0 &&
        paymentInfo &&
        (orderInfo.status == 2 ||
          orderInfo.status == 30 ||
          orderInfo.status == 10)
        ">
				<view class="moudle-title">{{ $t('order.Billing-message') }}</view>
				<view class="message-text">{{ paymentInfo.content }}</view>
			</view>
			<!-- 付款凭证 -->
			<view class="moudle" v-if="certificateList.length > 0">
				<view class="moudle-title">{{ $t('order.Payment-certificate') }}</view>
				<view class="certificate-box">
					<image @click="onPreviewImage(item)" :src="item" v-for="(item, index) in certificateList" :key="index"
						class="certificate-img"></image>
				</view>
			</view>
			<view class="moudle">
				<view class="moudle-title">{{ $t('order.Order-information') }}</view>
				<view class="info-gray">
					<view class="gray">{{ $t('order.Order-NO.') }}</view>
					<view class="gray">{{
            tradeType == 0 ? orderInfo.tradeId : orderInfo.orderNo
          }}</view>
				</view>
				<!-- <view class="info-gray">
          <text class="gray">creation time</text>
          <text class="gray">2022-10-10 19:57:01</text>
        </view> -->
				<!-- 付款时间 -->
				<view class="info-gray" v-if="orderInfo.status == 10 ||
          orderInfo.status == 20 ||
          orderInfo.status == 30
          ">
					<text class="gray">{{ $t('order.Payment-time') }}</text>
					<text class="gray">{{
            tradeType == 0 ? orderInfo.applyTime : orderInfo.applyTime
          }}</text>
				</view>
				<!-- 已完成时间 -->
				<view class="info-gray" v-if="orderInfo.status == 20">
					<text class="gray">{{ $t('order.Complete-time') }}</text>
					<text class="gray">{{
            tradeType == 0 ? orderInfo.tradeTime : orderInfo.tradeTime
          }}</text>
				</view>
				<!-- 申诉时间 -->
				<view class="info-gray" v-if="orderInfo.status == 30">
					<text class="gray">{{ $t('order.Appeal-time') }}</text>
					<text class="gray">{{
            tradeType == 0 ? "-" : orderInfo.complaintTime
          }}</text>
				</view>
				<!-- 取消时间 -->
				<view class="info-gray" v-if="orderInfo.status == 40">
					<text class="gray">{{ $t('order.Cancelled-time') }}</text>
					<text class="gray">{{
            tradeType == 0 ? "-" : orderInfo.cancelTime
          }}</text>
				</view>
			</view>
			<view class="moudle">
				<view class="gray-text">{{ $t('order.detail-tips1') }}</view>
				<view class="button-box">
					<view class="gray-button" @click="getCustomer(1)">{{ $t('order.contact-administrator') }}</view>
					<view class="gray-button" @click="contactBuyer" v-if="tradeType == 0 &&
            (orderInfo.status == 2 ||
              orderInfo.status == 30 ||
              orderInfo.status == 10)
            ">{{ $t('order.contact-Buyer') }}</view>
					<view class="gray-button" @click="contactSellor" v-if="tradeType == 1 &&
            (orderInfo.status == 2 ||
              orderInfo.status == 10 ||
              orderInfo.status == 30)
            ">{{ $t('order.contact-Sellor') }}</view>
				</view>
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="footer-wrap">
			<view class="button-wrap">
				<view class="confirm" @click="confirmPayment" v-if="orderInfo.status == 10 && tradeType == 0">
					{{ $t('index.Confirm') }}
				</view>
				<view class="cancel" v-if="orderInfo.status == 2 && tradeType == 1" @click="cancelOrder">
					{{ $t('order.cancel-order') }}
				</view>
				<view class="cancel" v-if="orderInfo.status == 30 && tradeType == 1" @click="complaintCancel">
					{{ $t('order.cancel-appeal') }}
				</view>
				<view class="cancel" @click="handleAppeal" v-if="orderInfo.status == 10 && tradeType == 1">
					{{ $t('order.appeal') }}
				</view>
				<view class="confirm" v-if="orderInfo.status == 2 && tradeType == 1" @click="uploadCertificate">
					{{ $t('order.Already-paid') }}
				</view>
				<view class="confirm" v-if="orderInfo.status == 30" @click="appealDetails">{{ $t('order.Appeal-Details') }}
				</view>
			</view>
		</view>
		<u-popup :show="showCode" mode="center" round="25" :closeable="true" @close="showCode = false">
			<view class="receipt-box">
				<view class="title">{{ $t('order.Receipt-Account') }}</view>
				<view class="receipt-info">{{ paymentInfo.content }}</view>
			</view>
		</u-popup>
		<u-popup :show="show" @close="show = false" mode="bottom" round="25" :closeOnClickOverlay="false">
			<view class="distinguish">
				<view @click="showQrCode" class="line"><text
						class="iconfont icon-QRcode"></text>{{ $t('order.Identify-QR-code') }}
				</view>
				<view @click="show = false" class="line gray no-border">{{ $t('index.Cancel') }}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import UQRCode from "@/utils/uqrcode.js";
	import {
		orderStatusText
	} from "@/utils/common";
	import {
		exchangeOrderDetail,
		getOderAddress,
		cancelComplaint,
		submitsCertificateA,
		getCurrencyList,
		cancelOrder,
		getTradeOrderDetail,
	} from "@/services/bourse";
	import UQrcode from "./components/UQrcode.vue";
	import SelectPopup from "../../components/SelectPopup.vue";
	export default {
		components: {
			UQrcode,
			SelectPopup
		},
		data() {
			return {
				orderId: "", //交易单ID
				orderStatus: 2,
				modules: [],
				currencyOption: [],
				orderInfo: {}, //订单信息
				certificateList: [],
				paymentInfo: {}, //收款信息
				show: false,
				showCode: false, //二维码内容
				countDownTime: 0,
				tradeType: 0, // 0卖出/1买入
			};
		},
		computed: {},
		onShow() {
			this.getDetail();
		},
		onLoad(options) {
			this.orderId = options.orderId;
			if (options.tradeType) {
				this.tradeType = options.tradeType;
			}
			this._getCurrencyList();
		},
		onReady() {
			// UQrcode相关
			// 获取uQRCode实例
			const qr = new UQRCode();
			// 设置uQRCode属性
			qr.data = "uQRCode"; //// 指定二维码对应内容
			// qr.setOptions({
			//   data: 'https://uqrcode.cn/doc', // 指定二维码对应内容
			//   size: 100, // 指定要生成的二维码大小
			//   margin: 10 // 指定二维码的边距
			// });
			qr.size = 146; // 指定要生成的二维码大小
			// qr.margin = 10; // 指定二维码的边距
			qr.make();
			this.modules = qr.modules;
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
		},
		methods: {
			onPreviewImage(item) {
				uni.previewImage({
					urls: this.certificateList,
					current: item
				});
			},
			// 订单详情
			async getDetail() {

				const api =
					this.tradeType == 0 ? getTradeOrderDetail : exchangeOrderDetail;
				const resp = await api(this.orderId);
				if (!resp.success) return;
				if (this.tradeType == 0) {
					const orderInfo = {
						...resp.result.data,
						...resp.result.data.exchangeOrderList[0],
						statusText: orderStatusText(resp.result.data.status),
						userName: resp.result.data.userName
					};
					this.orderInfo = orderInfo;
					// 付款证明
					this.certificateList = this.orderInfo.applyFileJson ?
						this.orderInfo.applyFileJson.split(",") : []
					console.log(this.orderInfo, 1111);
					// // 过期倒计时
					const date = new Date()
					const currentTime = new Date(date.toLocaleString('en-US', {
						timeZone: 'Europe/Moscow'
					})).getTime()
					this.countDownTime =
						new Date(this.orderInfo.expireTime).valueOf() - currentTime;
				} else {
					const orderInfo = {
						...resp.result.data,
						...resp.result.data.exchangeVo,
						statusText: orderStatusText(resp.result.data.status),
						userName: resp.result.data.userName
					};
					this.orderInfo = orderInfo;
					// 过期倒计时
					const date = new Date()
					const currentTime = new Date(date.toLocaleString('en-US', {
						timeZone: 'Europe/Moscow'
					})).getTime()
					this.countDownTime =
						new Date(this.orderInfo.expireTime).valueOf() - currentTime;
					// 付款证明
					this.certificateList = this.orderInfo.applyFileJson ?
						this.orderInfo.applyFileJson.split(",") : []
				}
				this.getPaymentAddress();
			},
			// 收款信息
			async getPaymentAddress() {
				const resp = await getOderAddress(this.orderInfo.tradeAddressId);
				if (!resp.success) return;
				this.paymentInfo = resp.result.data;
			},
			// 长按二维码跳出弹框
			longTap() {
				console.log("111");
				this.show = true;
			},
			// 二维码弹框内容
			showQrCode() {
				this.show = false;
				this.showCode = true;
			},
			// 跳转上传凭证页面
			uploadCertificate() {
				uni.navigateTo({
					url: `/pagesUser/bourse/OrderAppeal?orderId=${this.orderInfo.orderId}&status=1&tradeId=${this.orderInfo.tradeId}`,
				});
			},
			// 场外交易确认给乙方打款
			async confirmPayment() {
				console.log('dsadaadsd');
				const resp = await submitsCertificateA({
					orderId: this.orderInfo.orderId,
					tradeId: this.orderInfo.tradeId
				});
				if (!resp.success) return;
				uni.showToast({
					title: this.$t("index.operation-success"),
					icon: "none",
					duration: 1500,
				});
				this.getDetail();
			},
			async complaintCancel() {
				// 取消申诉
				const resp = await cancelComplaint({
					orderId: this.orderId,
				});
				if (!resp.success) return;
				uni.showToast({
					title: this.$t("index.operation-success"),
					icon: "none",
					duration: 1500,
				});
				this.getDetail();
			},
			// 发起申诉
			handleAppeal() {
				uni.navigateTo({
					url: `/pagesUser/bourse/OrderAppeal?orderId=${this.orderId}&status=2`,
				});
			}, // 获取币种
			async _getCurrencyList() {
				const {
					success,
					result
				} = await getCurrencyList();
				if (success) {
					this.currencyOption = result.data;
				}
			},
			getReceiveCurrency(id) {
				const arr = this.currencyOption?.filter((t) => t.id == id);
				if (arr.length > 0) {
					return arr[0].symbol;
				} else {
					return "";
				}
			},
			// 查看申诉详情
			appealDetails() {
				uni.navigateTo({
					url: `/pagesUser/bourse/OrderAppeal?orderId=${this.orderInfo.orderId}&status=3`,
				});
			},
			// 联系管理员
			contactSys() {
				console.log('dsadasdas', this.orderInfo);
				uni.navigateTo({
					url: `/pages/chat/chat`
				})
			},
			// 联系买家
			contactBuyer() {

				uni.navigateTo({
					url: `/pages/chat/PersonalChat?targetId=${this.orderInfo.applyUserId}`
				})
			},
			// 联系卖家
			contactSellor() {
				uni.navigateTo({
					url: `/pages/chat/PersonalChat?targetId=${this.orderInfo.tradeUserId}`
				})
			},
			// 取消订单
			async cancelOrder() {
				const {
					success,
					result
				} = await cancelOrder({
					orderId: this.orderId,
					tradeId: this.orderInfo.tradeId
				});
				if (success) {
					uni.showToast({
						title: this.$t("index.operation-success"),
						icon: "none",
						duration: 1500,
					});
					this.getDetail();
				}
			}

		},
	};
</script>

<style lang="scss" scoped>
	.content-box {
		width: 100%;
		box-sizing: border-box;
		min-height: 100vh;
		background: #f6f6f6;

		.content {
			padding: 30rpx;
			margin-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
			margin-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		}

		.status {
			font-size: 36rpx;
			font-weight: 500;
			color: #61bdb2;
			line-height: 52rpx;
			margin-bottom: 10rpx;
		}

		.tips {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;
			color: #878787;
			line-height: 36rpx;

			.time {
				margin-left: 8rpx;
			}
		}

		/deep/.u-count-down__text {
			color: #fe6600 !important;
		}

		.moudle {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 30rpx;

			.code-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;

				.tips {
					font-size: 24rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #878787;
					line-height: 36rpx;
					margin-top: 40rpx;
				}
			}

			.apply-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 36rpx;
				box-shadow: inset 0px -2rpx 0px 0px rgba(0, 0, 0, 0.05);

				.audit-results {
					font-size: 28rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #000000;
					line-height: 40rpx;
				}

				.apply-status {

					font-size: 28rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #fe6600;
					line-height: 40rpx;
				}
			}

			.apply-reason {
				padding-top: 36rpx;
				font-size: 28rpx;
				font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
				font-weight: 400;
				color: #878787;
				line-height: 40rpx;
			}

			.info-one {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.price {
					font-size: 32rpx;
					font-weight: 500;
					color: #fe6600;
					line-height: 48rpx;
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #878787;
					line-height: 40rpx;
				}
			}

			.info-gray {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}

			.info-gray:nth-last-child(1) {
				margin-bottom: 0;
			}

			.moudle-title {
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}

			.message-text {
				margin-top: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.3);
				line-height: 40rpx;
			}

			.certificate-img {
				width: 196rpx;
				height: 196rpx;
				border-radius: 24rpx;
				opacity: 1;
				border: 2rpx solid rgba(0, 0, 0, 0.05);
				margin-right: 18rpx;
				flex-wrap: wrap;
			}

			// todo
			.certificate-img:nth-child(3n) {
				margin-right: 0;
			}

			.gray-text {
				font-size: 28rpx;
				font-weight: 400;
				color: #878787;
				line-height: 40rpx;
			}

			.button-box {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 40rpx;

				.gray-button {
					display: flex;
					align-items: center;
					min-height: 80rpx;
					border-radius: 80rpx;
					opacity: 1;
					border: 2rpx solid rgba(135, 135, 135, 0.6);
					font-size: 28rpx;
					font-weight: 500;
					color: #878787;
					text-align: center;
					padding: 0 20rpx;
					margin-left: 20rpx;
				}
			}
		}

		.footer-wrap {
			width: 100%;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.button-wrap {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 10rpx 30rpx;

				.confirm {
					padding: 0 24rpx;
					height: 64rpx;
					border: 2rpx solid #61bdb2;
					border-radius: 64rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #61bdb2;
					text-align: center;
					line-height: 64rpx;
					margin-left: 20rpx;
				}

				.cancel {
					padding: 0 24rpx;
					height: 64rpx;
					border: 2rpx solid rgba(135, 135, 135, 0.6);
					border-radius: 64rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
					font-weight: 400;
					color: #878787;
					text-align: center;
					line-height: 64rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.receipt-box {
		width: 550rpx;
		padding: 50rpx;

		.title {
			font-size: 36rpx;
			font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
			font-weight: 500;
			color: #000000;
			line-height: 52rpx;
		}

		.receipt-info {
			font-size: 28rpx;
			font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
			font-weight: 400;
			color: #878787;
			line-height: 40rpx;
			margin-top: 40rpx;
		}
	}

	.distinguish {
		padding: 30rpx 30rpx calc(constant(safe-area-inset-bottom) + 30rpx);
		padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 30rpx);

		.line {
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
			text-align: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 500;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon-QRcode {
				margin-right: 20rpx;
				font-size: 18px;
				color: #000000;
			}

			&.no-border {
				border-bottom: none;
			}

			&.gray {
				color: #878787;
			}
		}
	}
</style>